<template>
  <MkDialog v-model="dialogValue" title="取血凭证打印" width="70%" top="1vh" :draggable="false">
    <div id="printQvXuePingZheng">
      <MkShenQingDan ref="shenQingDanRef" :isEdit="false" />
      <MkPanel title="取血信息">
        <MkTable :data="pinZhongXinXiList">
          <MkColumn prop="xueYePinZhong" label="血液品种" />
          <MkColumn prop="beiXueLiang" label="备血量" />
          <MkColumnInput prop="benCiQuLiang" label="本次取量" isEdit />
        </MkTable>
        <MkForm :model="quXueXinXi" formId="quXuePingZhengDaYin" :col="3" style="margin-top:10px;" ref="quXueXinXiRef">
          <MkSelectUser label="取血人" v-model="quXueXinXi.quXueRen" prop="quXueRen" />
          <MkInputNumber label="患者体温" v-model="quXueXinXi.huanZheTiWen" prop="huanZheTiWen">
            <template #suffix>℃</template>
          </MkInputNumber>
        </MkForm>
      </MkPanel>
      <MkPanel title="备血血液信息">
        <MkTable :data="beiXueXueYeList">
          <MkColumnXueYe prop="xueYePinZhong" />
        </MkTable>
      </MkPanel>
    </div>
    
    <template #footer>
      <el-button size="default" @click="dialogValue = false">取 消</el-button>
      <el-button type="primary" size="default" @click="print">打 印</el-button>
      <button ref="printButtonRef" v-print="printObj" style="display: none;"></button>
    </template>
  </MkDialog>
</template>

<script lang='ts' setup>

const dialogValue = ref(false)
const loadingEntity = (row) => {
  dialogValue.value = true
  // TODO 获取申请单数据、申请品种信息、备血血液信息

  // TODO 设置默认值
  
}
const quXueXinXiRef = ref()
const quXueXinXi = ref({
  quXueRen: '',
  huanZheTiWen: ''
})

const pinZhongXinXiList = ref([{
  xueYePinZhong: '悬浮红细胞',
  beiXueLiang: '100ml',
  benCiQuLiang: 100
}])
const beiXueXueYeList = ref([])
//#region 打印组件
const printButtonRef = ref()
const printObj = {
  id: "printQvXuePingZheng", //打印的html标签id
  popTitle: '',
  extraCss: "mkprintweb.css",
  extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
  closeCallback() {
    dialogValue.value = false
  },
}
//#endregion
/** 打印 */
const print = async () => {
  console.log('打印取血凭证')
  /** 进行校验后再触发打印方法 */
  const isValid = await quXueXinXiRef.value.validate()
  console.log(isValid);
  
  if (!isValid) return
  printButtonRef.value?.click()
}
defineExpose({ loadingEntity })
</script>

<style lang='scss' scoped>
  
</style>